<template>
  <div class="quick-entry">
    <div class="entry-grid">
      <div v-for="(item, index) in entryItems" :key="index" class="entry-item">
        <a :href="item.link">
          <div class="entry-icon" :style="{ backgroundColor: item.bgColor }">
            <img :src="item.icon" :alt="item.title">
          </div>
          <div class="entry-title">{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const entryItems = ref([
  {
    title: '京东超市',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6585/60ec0d0aEf35f7384/ec560dbf9b82b90b.png',
    link: '#',
    bgColor: '#e1f5fe'
  },
  {
    title: '数码电器',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png',
    link: '#',
    bgColor: '#f3e5f5'
  },
  {
    title: '京东服饰',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15972/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png',
    link: '#',
    bgColor: '#fff3e0'
  },
  {
    title: '京东生鲜',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png',
    link: '#',
    bgColor: '#e8f5e9'
  },
  {
    title: '京东到家',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png',
    link: '#',
    bgColor: '#ffebee'
  },
  {
    title: '充值缴费',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png',
    link: '#',
    bgColor: '#e0f7fa'
  },
  {
    title: '9.9元拼',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png',
    link: '#',
    bgColor: '#fff8e1'
  },
  {
    title: '领券',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png',
    link: '#',
    bgColor: '#e1f1ff'
  },
  {
    title: '领金贴',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/3276861d86eb7fb8.png',
    link: '#',
    bgColor: '#fff3e0'
  },
  {
    title: 'PLUS会员',
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png',
    link: '#',
    bgColor: '#fffde7'
  }
]);
</script>

<style lang="scss" scoped>
.quick-entry {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  .entry-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    
    @media (max-width: 1200px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .entry-item {
    text-align: center;
    
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .entry-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      transition: transform 0.3s;
      
      img {
        width: 65%;
        height: 65%;
        object-fit: contain;
      }
    }
    
    .entry-title {
      font-size: 14px;
      color: #333;
    }
    
    &:hover {
      .entry-icon {
        transform: scale(1.1);
      }
      
      .entry-title {
        color: var(--primary-color);
      }
    }
  }
}
</style> 